<!DOCTYPE html>
<html lang='zH-en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>后台用户管理</title>
    <link rel='stylesheet' href='./css/normalize.css'>
    <link rel='stylesheet' href='./css/bootstrap.min.css'>
    <link rel="stylesheet" href="./css/bootstrap-table.min.css">
    <link rel="stylesheet" href="./css/YHGL.min.css">
</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top " role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">全球风景图</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="YHGL.html">
                            <span class="glyphicon glyphicon-user"></span>
                            登录
                        </a>
                    </li>
                    <li>
                        <a href="index.html#lunbo">首页</a>
                    </li>
                    <li>
                        <a href="index.html#classic">经典线路</a>
                    </li>
                    <li>
                        <a href="index.html#domestic">国内风景</a>
                    </li>
                    <li>
                        <a href="index.html#overseas">国外风景</a>
                    </li>
                    <li>
                        <a href="index.html#hot">旅游热点</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section id="YHGL">
        <div class="container">
            <div class="row">
                <table class="table">
                </table>
            </div>
        </div>
    </section>


    <div class="modal fade" id="modal-id">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">用户注册</h4>
                </div>
                <div class="modal-body">


                    <form action="#" method="POST" class="form-horizontal" role="form">
                        <input type="hidden" id="_id" name="_id">
                        <input type="hidden" id="Deter" name="Deter">
                        <input type="hidden" id="group" name="group" value="新手上路">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username">用户名</label>
                            <div class="col-sm-6 col-offset-2">
                                <input type="text" class="form-control" id="username" name=username>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="email">邮箱</label>
                            <div class="col-sm-6 col-offset-2">
                                <input type="text" class="form-control" id="email" name=email>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="password" id="oldpass">密码</label>
                            <div class="col-sm-6 col-offset-2">
                                <input type="password" class="form-control" id="password" name=password>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Determine" id="newpass">确认密码</label>
                            <div class="col-sm-6 col-offset-2">
                                <input type="password" class="form-control" id="Determine" name=Determine>
                            </div>
                        </div>
                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>


    <footer>
        <div class="footer-box">
            <div class="container">
                <div class="row">
                    <div class="col-md-2">
                        <img class="img img-responsive" src="./img/chatu/三维码.png" alt="">
                    </div>
                    <div class="col-md-10">
                        <div class="href">
                            <a href="#lunbo">首页</a>/<a href="#classic">经典线路</a>/<a href="#domestic">国内风景</a>/<a
                                href="#overseas">国外风景</a>/<a href="#hot">旅游热点</a>
                        </div>
                        <hr>
                        <p>首页制作:&nbsp;董正科&nbsp;&nbsp;&nbsp;联系电话:&nbsp;000-0000-0000&nbsp;&nbsp;&nbsp;QQ:&nbsp;2222222222
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <script src='./js/jquery.min.js'></script>

    <script src="./js/jquery.validate.min.js"></script>

    <script src='./js/bootstrap.min.js'></script>
    <script src="./js/bootstrap-table.min.js"></script>
    <script src="./js/bootstrap-table-export.min.js"></script>

    <script>
        $(function () {
            load();

            $(".table").on("click", ".glyphicon-remove", function () {//删除
                var id = $(this).parent().attr("data-id");
                if (confirm(`确定要删除${id}?`)) {
                    // console.log(id);
                    $.ajax({
                        url: "http://localhost:3000/user",
                        type: "DELETE",
                        data: { _id: id },
                        success: function (res) {
                            if (res.status === 200) {
                                load();
                            }
                        }
                    })
                }
            })


            $(".table").on("click", ".glyphicon-edit", function () {

                //动态
                var id = $(this).parent().attr("data-id");
                console.log(id);
                $.ajax({
                    url: `http://localhost:3000/user/${id}`,
                    type: "GET",
                    success: function (res) {
                        console.log(res);
                        if (res.status === 200) {
                            const data = res.data;
                            $(".modal-title").html("信息修改");
                            $("#_id").val(id);
                            $("#username").val(data.username)
                            $("#email").val(data.email)
                            $("#Deter").val(data.password)//密码
                            $("#group").val("新手上路");
                            $("#oldpass").text("旧密码");
                            $("#newpass").text("新密码");
                        }
                        console.log(res);
                    }
                })

                //显示
                $("#modal-id").modal("show");
            })

            $("#modal-id").on("hidden.bs.modal", function () {
                $("#_id").val("");
                $("#username").val("");
                $("#email").val("")
                $("#password").val("");
                $("#Determine").val("");
                $("#Deter").val("")
                $("#group").val("")
            })//隐藏
            $("#modal-id form").validate({//验证
                submitHandler: function () {
                    var id = $("#_id").val();
                    var username = $("#username").val();
                    var email = $("#email").val()
                    var password = $("#password").val();
                    var Determine = $("#Determine").val();
                    var Deter = $("#Deter").val();//原密码
                    var group = $("#group").val()
                    if (id) {
                        var equa1 = equa(password, Deter);
                        if (equa1) {
                            password = Determine;//与后端对照
                            $.ajax({
                                url: `http://localhost:3000/user/${id}`,
                                type: "PUT",
                                data: { username, password, email },
                                success: function (res) {
                                    if (res.status === 200) {
                                        $("#modal-id").modal("hide");
                                        load();
                                    } else {
                                        alert(res.msg);
                                    }
                                }
                            })
                        } else {
                            alert("密码错误")
                        }

                        return false;
                    } else {//添加
                        var equa2 = equa(password, Determine);
                        if (equa2) {
                            console.log(top);
                            $.ajax({
                                url: "http://localhost:3000/user",
                                type: "POST",
                                data: { username, password, group, email },
                                success: function (res) {
                                    if (res.status === 200) {
                                        $("#modal-id").modal("hide");
                                        load();
                                    } else {
                                        alert(res.msg);
                                    }
                                }
                            })
                        } else {
                            alert("两次输入密码不一致");
                        }

                        return false;
                    }
                    // $("#_id").val("");
                    // $("#username").val("");
                    // $("#password").val("");
                    // $("#Determine").val("");
                },
                rules: {
                    username: {
                        required: true,
                        minlength: 2,
                        maxlength: 12
                    },
                    password: {
                        required: true,
                        minlength: 6,
                        maxlength: 12,
                    }
                },
                messages: {
                    username: {
                        required: "请输入用户名",
                        minlength: "标题最少二个字符",
                        maxlength: "标题最多十二个字符"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码至少6位",
                        maxlength: "密码最高12位"
                    }
                }
            });

            function equa(a, b) {
                return a == b;
            }

            $("#modal-id").on("click", ".btn-primary", function () {
                $(this).closest(".modal-content").find("form").submit();
            })



            function load() {//查
                $.ajax({
                    url: "http://localhost:3000/user",
                    type: "GET",
                    success: function (res) {
                        if (res.status === 200) {
                            $('.table').bootstrapTable('destroy').bootstrapTable({
                                data: res.data,//属性名称
                                //url:""  "请求数据源"

                                pagination: true,//启用分页
                                pageSize: 5,//分页大小
                                //PageList:[5,10,20]

                                showToggle: "true",//切换列表
                                showPaginationSwitch: "true",//分页开关
                                showFullscreen: "true",//全屏
                                // showRefresh:"true",//刷新,仅支持url数据源
                                search: "true",//查询工具条
                                showSearchButton: true,//显示查询按钮

                                columns: [{//列
                                    field: "state",
                                    checkbox: "true"
                                }, {
                                    field: 'username',
                                    title: '用户名'
                                }, {
                                    field: 'email',
                                    title: '邮箱'
                                }, {
                                    field: 'password',
                                    title: '密码'
                                }, {
                                    field: 'group',
                                    title: '等级'
                                }, {
                                    title: "操作",
                                    formatter: function (value, data) {
                                        return `<a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-edit text-primary"></span></a>
                                                <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-remove text-danger"></span></a>`;
                                    }
                                }],

                                //自定义按钮集合
                                buttons: function () {
                                    return {
                                        btnAdd: {
                                            icon: 'glyphicon glyphicon-plus',
                                            event: function () {
                                                // alert('添加')
                                                $(".modal-title").html("用户注册");
                                                $("#oldpass").text("密码");
                                                $("#newpass").text("确定密码");
                                                $("#modal-id").modal("show");
                                            },
                                            attributes: {
                                                title: "add",
                                                // "data-toggle": "modal",
                                                // href: "#modal-id"
                                            }
                                        },
                                        btnDel: {
                                            icon: 'glyphicon glyphicon-remove',
                                            event: function () {
                                                //选区所有选中行对应的绑定数据
                                                var ids = $(".table").bootstrapTable("getSelections");
                                                console.log(ids);
                                                if (ids.length !== 0) {
                                                    $.ajax({
                                                        url: "http://localhost:3000/user",
                                                        type: "DELETE",
                                                        data: { _id: ids },
                                                        success: function (res) {
                                                            console.log(res);
                                                            if (res.status === 200) {
                                                                load();
                                                            }
                                                        }
                                                    })
                                                }
                                            },
                                            attributes: {
                                                title: "remove"
                                            }
                                        }
                                    }
                                }
                            })
                        }
                    }
                })
            }
        })
    </script>
</body>

</html>